<template>
    <div id="app" class="app">
        <!-- <button @click="test">测试</button>
        <button @click="test1">导出</button> -->
        <x6 ref="x6" round @deleteNode="deleteNode" multiParent @connectedEdge="connectedEdge" @collapse="collapse">
            <template slot="tooltip">
                <el-tooltip content="测试">
                    <button class="x6-toolbar-item">
                        <span class="x6-toolbar-item-icon"><span role="img" aria-label="play-square"
                                class="anticon anticon-play-square">
                                <svg-icon icon-class="test" /></span></span>
                    </button>
                </el-tooltip>
                <el-tooltip content="调度">
                    <button class="x6-toolbar-item">
                        <span class="x6-toolbar-item-icon"><span role="img" aria-label="gateway"
                                class="anticon anticon-gateway">
                                <svg-icon icon-class="dispatch" /> </span></span>
                    </button>
                </el-tooltip>
            </template>
        </x6>
        <!-- <x6 ref="x7" :toolbar="false"> -->
    </div>
</template>

<script>
import x6 from "./index";
export default {
    name: "App",
    components: {
        x6,
    },
    data() {
        return {
            taskgroups:[],
            groups: [],
            nodes: [],
        };
    },
    mounted() {
        const taskgroups = [
    {
        "taskgroupGroupId": "52f688754de6d5eb40b843788e7d1e25",
        "taskgroupname": "批组件",
        "taskgrouptitle": "批组件",
        "taskgroupexpand": true
    },
    {
        "taskgroupGroupId": "62be9b8cda9572a4b34d43c48e70e327",
        "taskgroupname": "流组件",
        "taskgrouptitle": "流组件",
        "taskgroupexpand": true
    }
]
const groups = [
    {
        "taskgroup": "批组件",
        "sceneGroupId": "dataImport",
        "name": "dataImport",
        "title": "数据导入",
        "expand": true
    },
    {
        "taskgroup": "批组件",
        "sceneGroupId": "featureEngine",
        "name": "featureEngine",
        "title": "特征工程",
        "expand": true
    },
 
    {
        "taskgroup": "流组件",
        "sceneGroupId": "dataImport",
        "name": "dataImport",
        "title": "数据导入",
        "expand": true
    },
 
]
     
        const nodes =  [
        {
        "numInPorts": 2,
        "numOutPorts": 1,
        "icon": "caidanguanli2",
        "text": "内存数据读入",
        "group": "dataImport",
        "taskgroup": "批组件",
        "color": "#8231C9",
        "data": {
            "node": {
                "id": "1e3a813f345d15287fbc99b2addd68fa",
                "displayName": "内存数据读入",
                "pluginName": "MemSourceBatchOp1",
                "pluginType": "dataImport",
                "dbType": "batch",
                "pluginIcon": "caidanguanli2",
                "pluginEnabled": 1,
                "pluginExt": "{\"className\":\"com.alibaba.alink.operator.batch.source.MemSourceBatchOp\"}",
                "requir": null,
                "provide": null,
                "note": '随机生成批式的表数据。\n支持5种随机数据生成方法：uniform, uniform_open, gauss, weight_set 和 poisso',
                "tenantId": null,
                "createUser": "8a90fba968a1f2c60168a1f4a36d0000",
                "createTime": "2024-03-08 12:50:07",
                "updateUser": "8a90fba968a1f2c60168a1f4a36d0000",
                "updateTime": "2024-03-08 14:06:22",
                "classificationId": null,
                "page": null,
                "size": 10,
                "pluginTypeNameCn": null,
                "sceneGroupId": null,
                "sceneGroupName": null,
                "params": null,
                "color": "#8231C9",
                "alinkTypeNameCn": "数据导入",
                "alinkTaskTypeNameCn": "批组件"
            }
        }
    },
        {
            "numInPorts": 0,
        "numOutPorts": 1,
        "icon": "caidanguanli2",
        "text": "随机生成结构数据源",
        "group": "dataImport",
        "taskgroup": "批组件",
        "color": "#8231C9",
        "data": {
            "node": {
                "id": "005af0add073a72b30386396e5532d4d",
                "displayName": "随机生成结构数据源",
                "pluginName": "RandomTableSourceBatchOp",
                "pluginType": "dataImport",
                "dbType": "batch",
                "pluginIcon": "caidanguanli2",
                "pluginEnabled": 1,
                "pluginExt": "{\"className\":\"com.alibaba.alink.operator.batch.source.RandomTableSourceBatchOp\",\"formJson\":[{\"label\":\"idCol\",\"placeholder\":\"请输入idCol\",\"type\":\"input\",\"key\":\"idCol\"},{\"label\":\"outputColConfs\",\"placeholder\":\"请输入outputColConfs\",\"type\":\"input\",\"key\":\"outputColConfs\"},{\"label\":\"outputCols\",\"placeholder\":\"请输入outputCols\",\"type\":\"input\",\"key\":\"outputCols\"},{\"label\":\"numCols\",\"placeholder\":\"请输入numCols\",\"type\":\"input\",\"key\":\"numCols\"},{\"label\":\"numRows\",\"placeholder\":\"请输入numRows\",\"type\":\"input\",\"key\":\"numRows\"}]}",
                "requir": null,
                "provide": null,
                "note": '从Table中生成BatchOperator数据',
                "tenantId": null,
                "createUser": "8a90fba968a1f2c60168a1f4a36d0000",
                "createTime": "2024-03-08 12:52:23",
                "updateUser": "8a90fba968a1f2c60168a1f4a36d0000",
                "updateTime": "2024-03-11 17:09:20",
                "classificationId": null,
                "page": null,
                "size": 10,
                "pluginTypeNameCn": null,
                "sceneGroupId": null,
                "sceneGroupName": null,
                "params": null,
                "color": "#8231C9",
                "alinkTypeNameCn": "数据导入",
                "alinkTaskTypeNameCn": "批组件"
            }
        }
    },
    {
        "numInPorts": 3,
        "numOutPorts": 3,
        "icon": "caidanguanli2",
        "text": "主成分分析训练",
        "group": "featureEngine",
        "taskgroup": "批组件",
        "color": "#8231C9",
        "data": {
            "node": {
                "id": "00d03d5a858fd09816d670919a2b2c4a",
                "displayName": "主成分分析训练31",
                "pluginName": "PcaTrainBatchOp",
                "pluginType": "featureEngine",
                "dbType": "batch",
                "pluginIcon": "caidanguanli2",
                "pluginEnabled": 1,
                "pluginExt": "{\"className\":\"com.alibaba.alink.operator.batch.feature.PcaTrainBatchOp\",\"formJson\":[{\"label\":\"selectedCols\",\"placeholder\":\"请输入selectedCols\",\"type\":\"input\",\"key\":\"selectedCols\"},{\"label\":\"vectorCol\",\"placeholder\":\"请输入vectorCol\",\"type\":\"input\",\"key\":\"vectorCol\"},{\"label\":\"k\",\"placeholder\":\"请输入k\",\"type\":\"input\",\"key\":\"k\"},{\"label\":\"calculationType\",\"placeholder\":\"请输入calculationType\",\"type\":\"input\",\"key\":\"calculationType\"}]}",
                "requir": null,
                "provide": null,
                "note": "主成分分析，是考察多个变量间相关性一种多元统计方法，研究如何通过少数几个主成分来揭示多个变量间的内部结构，即从原始变量中导出少数几个主成分，使它们尽可能多地保留原始变量的信息，且彼此间互不相关，作为新的综合指标。详细介绍请见维基百科链接wiki。\n主成分分析功能包含主成分分析训练和主成分分析预测（批和流)",
                "tenantId": null,
                "createUser": "8a90fba968a1f2c60168a1f4a36d0000",
                "createTime": "2024-03-08 16:42:36",
                "updateUser": "8a90fba968a1f2c60168a1f4a36d0000",
                "updateTime": "2024-03-11 15:56:32",
                "classificationId": null,
                "page": null,
                "size": 10,
                "pluginTypeNameCn": null,
                "sceneGroupId": null,
                "sceneGroupName": null,
                "params": null,
                "color": "#8231C9",
                "alinkTypeNameCn": "特征工程",
                "alinkTaskTypeNameCn": "批组件"
            }
        }
    },
    {
       
        "icon": "anquandengji",
        "text": "222",
        "group": "dataImport",
        "taskgroup": "流组件",
        "color": "#ef672f",
        "data": {
            "node": {
                "id": "62be9b8cda9572a4b34d43c48e70e327",
                "displayName": "222",
                "pluginName": "2222",
                "pluginType": "dataImport",
                "dbType": "stream",
                "pluginIcon": "anquandengji",
                "pluginEnabled": 1,
                "pluginExt": null,
                "requir": null,
                "provide": null,
                "note": null,
                "tenantId": null,
                "createUser": "8a90fba968a1f2c60168a1f4a36d0000",
                "createTime": "2024-03-08 15:28:57",
                "updateUser": "8a90fba968a1f2c60168a1f4a36d0000",
                "updateTime": "2024-03-08 15:28:57",
                "classificationId": null,
                "page": null,
                "size": 10,
                "pluginTypeNameCn": null,
                "sceneGroupId": null,
                "sceneGroupName": null,
                "params": null,
                "color": "#ef672f",
                "alinkTypeNameCn": "数据导入",
                "alinkTaskTypeNameCn": "流组件"
            }
        }
    },
 
]
        this.$refs.x6.init(groups, nodes,taskgroups);

    },
    methods: {
        connectedEdge(args) {
            console.log(args)
        },
        test() {
            // const data=  this.$refs.x6.graph.getNodes()
            //const cell={ cell: data[0] }
            //this.$refs.x6.changeNodeName(cell,'数据同步数111111据同步')
            //console.log(this.$refs.x6.graph.toJSON())
            const data = [
                {
                    "position": {
                        "x": 370,
                        "y": 180
                    },
                    "size": {
                        "width": 170,
                        "height": 36
                    },
                    "view": "vue-shape-view",
                    "attrs": {
                        "label": {
                            "text": "MySQL输入"
                        }
                    },
                    "shape": "rtNode",
                    "component": {
                        "components": {
                            "testnode": {
                                "name": "testnode",
                                "directives": {},
                                "inject": {
                                    "getGraph": {
                                        "from": "getGraph"
                                    },
                                    "getNode": {
                                        "from": "getNode"
                                    }
                                },
                                "props": {
                                    "round": {
                                        "default": false
                                    }
                                },
                                "methods": {},
                                "staticRenderFns": [],
                                "_compiled": true,
                                "_scopeId": "data-v-03c2805a11111",
                                "_Ctor": {}
                            }
                        },
                        "template": "<testnode :round=\"round\"/>"
                    },
                    "ports": {
                        "groups": {
                            "in": {
                                "position": {
                                    "name": "top"
                                },
                                "attrs": {
                                    "circle": {
                                        "r": 4,
                                        "magnet": true,
                                        "stroke": "#31d0c6",
                                        "strokeWidth": 1,
                                        "fill": "#fff"
                                    }
                                },
                                "zIndex": 2
                            },
                            "out": {
                                "position": {
                                    "name": "bottom"
                                },
                                "attrs": {
                                    "circle": {
                                        "r": 4,
                                        "magnet": true,
                                        "stroke": "#31d0c6",
                                        "strokeWidth": 1,
                                        "fill": "#fff"
                                    }
                                },
                                "zIndex": 2
                            }
                        },
                        "items": [
                            {
                                "group": "in",
                                "id": "2a4335d2-6f85-4920-bdce-c9b00bab32d6"
                            },
                            {
                                "group": "out",
                                "id": "22e4beba-8ce8-499c-aa42-156f53864090"
                            }
                        ]
                    },
                    "id": "d00c7b03-bf2c-4305-a3d1-aac4aff89387",
                    "data": {
                        "node": {
                            "tenantId": 0,
                            "params": {},
                            "id": "81e4141411f24bf7941c9ee00ce796c8",
                            "sceneGroupId": "6676432b9742458a996b6a2b3527f657",
                            "sceneGroupName": "输入",
                            "displayName": "MySQL输入",
                            "pluginName": "TableConsumer",
                            "pluginType": "reader",
                            "pluginTypeNameCn": "输入",
                            "dbType": "mysql",
                            "color": "#8231C9",
                            "icon": "x6-mysql",
                            "pluginEnabled": 1,
                            "pluginExt": "[{\"argName\":\"dbType\",\"argValue\":\"mysql\"}]",
                            "requir": "[]",
                            "provide": "[{\"argNameCn\":\"输出数据\",\"argNameEn\":\"tableConsumerOutput\"}]",
                            "isQuerySql": false,
                            "readMode": "full",
                            "streamReadSize": 10000,
                            "streamReadTime": "3",
                            "tableColumns": [
                                "id",
                                "name",
                                "age",
                                "cd_lsh",
                                "cd_batch",
                                "cd_time"
                            ],
                            "currProvide": "tableConsumerOutput_d00c7b03-bf2c-4305-a3d1-aac4aff89387",
                            "currProvideDataList": [
                                {
                                    "argNameCn": "输出数据",
                                    "argNameEn": "tableConsumerOutput"
                                }
                            ],
                            "dataLayer": "631884676201459712",
                            "sourceDbId": "1112784696883818496",
                            "sourceDbName": "test_ws",
                            "sourceDbCnName": "mysql_test_ws_26",
                            "sourceTableId": "1112784792497164288",
                            "splitPk": "",
                            "posColumn": "",
                            "outputTable": [
                                {
                                    "id": "1112784795223461888",
                                    "dbId": "1112784696883818496",
                                    "tableId": "1112784792497164288",
                                    "columnNameCn": "id",
                                    "columnNameEn": "id",
                                    "dataType": "integer",
                                    "sqlDataType": "INT",
                                    "columnLength": 10,
                                    "nullable": 0,
                                    "isPrimaryKey": 1,
                                    "isunique": 1,
                                    "description": "id",
                                    "precisions": 0,
                                    "jdbctype": 4,
                                    "isCombinedPk": 0,
                                    "isBucketKey": 0,
                                    "isOrderByKey": 0
                                },
                                {
                                    "id": "1112784795227656192",
                                    "dbId": "1112784696883818496",
                                    "tableId": "1112784792497164288",
                                    "columnNameCn": "name",
                                    "columnNameEn": "name",
                                    "dataType": "string",
                                    "sqlDataType": "VARCHAR",
                                    "columnLength": 255,
                                    "nullable": 1,
                                    "isPrimaryKey": 0,
                                    "isunique": 0,
                                    "description": "name",
                                    "precisions": 0,
                                    "jdbctype": 12,
                                    "isCombinedPk": 0,
                                    "isBucketKey": 0,
                                    "isOrderByKey": 0
                                },
                                {
                                    "id": "1112784795227656193",
                                    "dbId": "1112784696883818496",
                                    "tableId": "1112784792497164288",
                                    "columnNameCn": "age",
                                    "columnNameEn": "age",
                                    "dataType": "integer",
                                    "sqlDataType": "INT",
                                    "columnLength": 10,
                                    "nullable": 1,
                                    "isPrimaryKey": 0,
                                    "isunique": 0,
                                    "description": "age",
                                    "precisions": 0,
                                    "jdbctype": 4,
                                    "isCombinedPk": 0,
                                    "isBucketKey": 0,
                                    "isOrderByKey": 0
                                },
                                {
                                    "id": "1112784795227656194",
                                    "dbId": "1112784696883818496",
                                    "tableId": "1112784792497164288",
                                    "columnNameCn": "cd_lsh",
                                    "columnNameEn": "cd_lsh",
                                    "dataType": "long",
                                    "sqlDataType": "BIGINT",
                                    "columnLength": 19,
                                    "nullable": 1,
                                    "isPrimaryKey": 0,
                                    "isunique": 0,
                                    "description": "cd_lsh",
                                    "precisions": 0,
                                    "jdbctype": -5,
                                    "isCombinedPk": 0,
                                    "isBucketKey": 0,
                                    "isOrderByKey": 0
                                },
                                {
                                    "id": "1112784795227656195",
                                    "dbId": "1112784696883818496",
                                    "tableId": "1112784792497164288",
                                    "columnNameCn": "cd_batch",
                                    "columnNameEn": "cd_batch",
                                    "dataType": "string",
                                    "sqlDataType": "VARCHAR",
                                    "columnLength": 255,
                                    "nullable": 1,
                                    "isPrimaryKey": 0,
                                    "isunique": 0,
                                    "description": "cd_batch",
                                    "precisions": 0,
                                    "jdbctype": 12,
                                    "isCombinedPk": 0,
                                    "isBucketKey": 0,
                                    "isOrderByKey": 0
                                },
                                {
                                    "id": "1112784795227656196",
                                    "dbId": "1112784696883818496",
                                    "tableId": "1112784792497164288",
                                    "columnNameCn": "cd_time",
                                    "columnNameEn": "cd_time",
                                    "dataType": "timestamp",
                                    "sqlDataType": "DATETIME",
                                    "columnLength": 19,
                                    "nullable": 1,
                                    "isPrimaryKey": 0,
                                    "isunique": 0,
                                    "description": "cd_time",
                                    "precisions": 0,
                                    "jdbctype": 93,
                                    "isCombinedPk": 0,
                                    "isBucketKey": 0,
                                    "isOrderByKey": 0
                                }
                            ],
                            "sourceTableName": "user_info",
                            "sourceTableCnName": "user_info"
                        },
                        "selected": false
                    },
                    "zIndex": 1
                },
                {
                    "position": {
                        "x": 350,
                        "y": 350
                    },
                    "size": {
                        "width": 170,
                        "height": 36
                    },
                    "view": "vue-shape-view",
                    "attrs": {
                        "label": {
                            "text": "kafka输出"
                        }
                    },
                    "shape": "rtNode",
                    "component": {
                        "components": {
                            "testnode": {
                                "name": "testnode",
                                "directives": {},
                                "inject": {
                                    "getGraph": {
                                        "from": "getGraph"
                                    },
                                    "getNode": {
                                        "from": "getNode"
                                    }
                                },
                                "props": {
                                    "round": {
                                        "default": false
                                    }
                                },
                                "methods": {},
                                "staticRenderFns": [],
                                "_compiled": true,
                                "_scopeId": "data-v-8f00486e",
                                "_Ctor": {}
                            }
                        },
                        "template": "<testnode :round=\"round\"/>"
                    },
                    "ports": {
                        "groups": {
                            "in": {
                                "position": {
                                    "name": "top"
                                },
                                "attrs": {
                                    "circle": {
                                        "r": 4,
                                        "magnet": true,
                                        "stroke": "#31d0c6",
                                        "strokeWidth": 1,
                                        "fill": "#fff"
                                    }
                                },
                                "zIndex": 2
                            },
                            "out": {
                                "position": {
                                    "name": "bottom"
                                },
                                "attrs": {
                                    "circle": {
                                        "r": 4,
                                        "magnet": true,
                                        "stroke": "#31d0c6",
                                        "strokeWidth": 1,
                                        "fill": "#fff"
                                    }
                                },
                                "zIndex": 2
                            }
                        },
                        "items": [
                            {
                                "group": "in",
                                "id": "4e737654-6622-4502-aea3-f093fcd51b61",
                                "connected": true
                            },
                            {
                                "group": "out",
                                "id": "692d77e1-0848-45b2-a62f-0f055bbef4e0"
                            }
                        ]
                    },
                    "id": "edb60218-8995-40b0-8c1c-77d377642525",
                    "data": {
                        "node": {
                            "tenantId": 0,
                            "params": {},
                            "id": "e88931f315ea41bfbd4a9f8c812a9d3f",
                            "sceneGroupId": "385828d3e1614e5d8b3e8ad26632ef17",
                            "sceneGroupName": "输出",
                            "displayName": "kafka输出",
                            "pluginName": "ApacheKafka20xProducer",
                            "pluginType": "writer",
                            "pluginTypeNameCn": "输出",
                            "dbType": "kafka",
                            "color": "#ef672f",
                            "icon": "x6-ziduanpinjie",
                            "pluginEnabled": 1,
                            "pluginExt": "[{\"argName\":\"dbType\",\"argValue\":\"kafka\"}]",
                            "requir": "[{\"argNameCn\":\"kafka输入数据\",\"argNameEn\":\"apacheKafka20xWriterInput\"}]",
                            "provide": "[]",
                            "preProvideData": "tableConsumerOutput",
                            "preProvide": "tableConsumerOutput_d00c7b03-bf2c-4305-a3d1-aac4aff89387",
                            "dbId": "1150824112281628672",
                            "sourceAppId": "0000001",
                            "dataFormat": "json",
                            "topicName": "user_info",
                            "data": "",
                            "dataTemplate": [
                                {
                                    "fieldName": "id",
                                    "fieldType": "integer",
                                    "fieldDescription": "id"
                                },
                                {
                                    "fieldName": "name",
                                    "fieldType": "string",
                                    "fieldDescription": "name"
                                },
                                {
                                    "fieldName": "sex",
                                    "fieldType": "integer",
                                    "fieldDescription": "sex"
                                },
                                {
                                    "fieldName": "address",
                                    "fieldType": "string",
                                    "fieldDescription": "address"
                                }
                            ],
                            "currRequire": "apacheKafka20xWriterInput",
                            "currProvide": "apacheKafka20xWriterOutput",
                            "outputTable": [
                                {
                                    "columnNameEn": "id",
                                    "columnNameCn": "id",
                                    "sqlDataType": "integer"
                                },
                                {
                                    "columnNameEn": "name",
                                    "columnNameCn": "name",
                                    "sqlDataType": "string"
                                },
                                {
                                    "columnNameEn": "sex",
                                    "columnNameCn": "sex",
                                    "sqlDataType": "integer"
                                },
                                {
                                    "columnNameEn": "address",
                                    "columnNameCn": "address",
                                    "sqlDataType": "string"
                                }
                            ],
                            "sourceDsName": "kafka测试1",
                            "applicationName": "教育局",
                            "consumptionGroupId": "",
                            "sourceTopicId": 29,
                            "mapping": [
                                {
                                    "streamField": "id",
                                    "tableField": "id"
                                },
                                {
                                    "streamField": "name",
                                    "tableField": "name"
                                }
                            ],
                            "mappings": [
                                {
                                    "fieldName": "id",
                                    "blockName": "id"
                                },
                                {
                                    "fieldName": "name",
                                    "blockName": "name"
                                }
                            ]
                        }
                    },
                    "zIndex": 2
                },
                {
                    "shape": "rtEdge",
                    "attrs": {
                        "line": {
                            "targetMarker": "classic",
                            "strokeDasharray": ""
                        }
                    },
                    "connector": {
                        "name": "pai"
                    },
                    "zIndex": 2,
                    "id": "757382ef-14b9-45e9-b017-16e23c55280d",
                    "data": {
                        "source": "d00c7b03-bf2c-4305-a3d1-aac4aff89387",
                        "target": "edb60218-8995-40b0-8c1c-77d377642525",
                        "outputPortId": "22e4beba-8ce8-499c-aa42-156f53864090",
                        "inputPortId": "4e737654-6622-4502-aea3-f093fcd51b61"
                    },
                    "source": {
                        "cell": "d00c7b03-bf2c-4305-a3d1-aac4aff89387",
                        "port": "22e4beba-8ce8-499c-aa42-156f53864090"
                    },
                    "target": {
                        "cell": "edb60218-8995-40b0-8c1c-77d377642525",
                        "port": "4e737654-6622-4502-aea3-f093fcd51b61"
                    }
                }
            ]

            this.$refs.x6.fromJSON(data)
        },
        test1() {
             this.$refs.x6.setBtnDisabled(false)
         
        },
        deleteNode(node) {
            console.log(node)
        },
        collapse(f) {
            console.log(f)
        }
    },
};
</script>

<style scoped lang="less">
.app {
    height: 100%;
    width: 1005;
}
</style>
